
import { BaseView, BaseViewClass, addHubEvents, addDomEvents } from './base';
import { display, first, all, empty, hub, push } from 'mvdom';
import { HomeView } from './HomeView';
import { NavView } from './NavView';
import { ToolsView } from './ToolsView';
import { StatsView } from './stats/StatsView';
import { solar2lunar } from 'ts/utils-lunar';


const defaultPath = "home";

let pathToView: { [name: string]: BaseViewClass } = {
	"home": HomeView,
	"stats": StatsView,
	"tools": ToolsView
};

export class MainView extends BaseView {


	constructor() {
		super();
	}

	//// View key elements
	private get nav() { return first(this.el, 'nav')! };
	protected get main() { return first(this.el, 'main')! };

	//#region    ---------- View Events ---------- 
	events = addDomEvents(this.events, {
	});
	//#endregion ---------- /View Events ----------

	//#region    ---------- Hub Events ----------
	hubEvents = addHubEvents(this.hubEvents, {
		// 'routeHub' is the hub receiving url changes
		'routeHub; CHANGE': () => {
			this.refresh();
		}
	});
	//#endregion ---------- /Hub Events ---------- 

	async postDisplay() {
		display(new NavView(), this.nav, null, 'empty');
	}

	private refresh() {
		const newPath = this.hasNewPathAt(0, defaultPath);

		// update this view/content only if the path has changed
		if (newPath != null) {
			const subViewClass = pathToView[newPath];
			if (subViewClass) {
				empty(this.main);
				display(new subViewClass, this.main, null, 'empty');
			} else {
				console.log(`ERROR - No view found for path ${newPath}`);
			}

		}

	}
}